<template>
  <a-modal :visible="modalVisible" title="加签" @cancel="cancel" @ok="ok">
    <a-form :model="addNodeData">
      <a-form-item field="name" label="类型">
        <a-select
          placeholder=""
          v-model="formData.pointDetail.pointType"
          @change="pointTypeChange"
        >
          <a-option
            v-for="item in approverTypeList"
            :key="item.value"
            :value="item.value"
            :label="item.lable"
          />
        </a-select>
      </a-form-item>
      <a-form-item field="name" label="参与者">
        <div
          style="
            border: 1px solid #c9cdd4;
            width: 100%;
            border-radius: 4px;
            display: flex;
            flex-wrap: wrap;
            min-height: 30px;
            cursor: text;
          "
          @click="tagClick"
        >
          <a-tag
            v-for="tag in formData.pointDetail.participantInfos"
            :key="tag.objId"
            closable
            style="margin: 5px"
            @close="delHuman(tag.id)"
            >{{ tag.objName }}</a-tag
          >
        </div>
      </a-form-item>
      <a-form-item field="name" label="审批意见">
        <a-textarea v-model="formData.approvalOpinions" placeholder="" />
      </a-form-item>
    </a-form>
  </a-modal>
  <HumanMadal
    v-model:visible="humanVisible"
    v-model:data="currenHuman"
    @submit="roleOk"
  />
</template>
<script setup lang="ts">
import clonedeep from 'lodash.clonedeep';
import type { PointDetail } from '@/apis/approvalExecute/type';
import { reactive } from 'vue';
import { useVModel } from '@vueuse/core';
import type { AddNode } from '@/apis/approvalExecute/addNodeType';
import HumanMadal from './HumanMadal/index.vue';

const props = withDefaults(
  defineProps<{
    addNodeData: AddNode;
    visible?: boolean;
  }>(),
  {}
);
const emits = defineEmits(['update:visible', 'submit', 'update:opinions']);
const formData = useVModel(props, 'addNodeData', emits);
const modalVisible = useVModel(props, 'visible', emits);
const approverTypeList = [
  {
    value: 1,
    lable: '审批人'
  },
  {
    value: 2,
    lable: '抄送人'
  }
];
const cancel = () => {
  modalVisible.value = false;
};
const ok = () => {
  modalVisible.value = false;
  emits('submit');
};
const humanVisible = ref(false);
const currenHuman = ref<any[]>([]);
const tagClick = () => {
  currenHuman.value = formData.value.pointDetail.participantInfos;
  humanVisible.value = true;
};
const roleOk = () => {
  let arr: any = [];
  currenHuman.value.forEach((item) => {
    let obj = {
      objId: item.id,
      objName: item.name,
      objType: 1
    };
    arr.push(obj);
  });
  formData.value.pointDetail.participantInfos = arr;
  humanVisible.value = false;
};
const pointTypeChange = () => {
  const { pointType } = formData.value.pointDetail;
  formData.value.pointDetail.pointName = pointType === 1 ? '审核人' : '抄送人';
};
</script>
